<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>


<!DOCTYPE html>
<html>
<@layout.head title="产品管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
    <style>
        .showImagBox {
            position: relative;
        }

        .showImag {
            display: block;
            background-color: #efefef;
            margin: 3px;
            max-width: 100%;
            height: 300px;
            position: relative;
        }

        .showImagBox img {
            width: 200px;
            height: 200px;
        }

        .showImagBox img:before {
            content: "点击上传";
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border-left: 2px solid #d9d9d9;
            color: #ccc;
            width: 160px;
            font-size: 1.4em;
            line-height: 39.5px;
            text-align: center;
            background-color: transparent;
        }

        .showImagBox img:after {
            left: calc(50% - 80px);
            content: " ";
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #d9d9d9;
            width: 39.5px;
            height: 2px;
        }

        body, html {
            background: none;
        }

    </style>
    <script src="${request.contextPath}/assets/js/myImgTool.js?v=3653060703"></script>
</@layout.head>
<body>
<@layout.page>
    <div class="main-box">
        <div class="content">
            <!-- 表格 -->
            <div style="position: relative;top:5px;">
                <@dataTables.commonTable id="mainTable"/>
            </div>
            <div id="searchGroup" class="btn-group" style="position: absolute;top:0px;" >
                <select class='form-control' id='types' placeholder='请选择分类'
                        style='width:150px; margin-left: 10px;float: left'>
                    <option value='0'>请选择分类</option>
                    <#list type as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
                <select class='form-control' id='brands' placeholder='请选择品牌'
                        style='width:150px; margin-left:10px;float: left'>
                    <option value='0'>请选择品牌</option>
                    <#list brand as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
                <select class='form-control' id='indexStates' placeholder='首页是否显示'
                        style='width:150px; margin-left:10px;float: left'>
                    <option value='0'>首页是否显示</option>
                    <#list indexState as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
                <select class='form-control' id='productStates' placeholder='产品状态'
                        style='width:150px; margin-left:10px;float: left'>
                    <option value='0'>产品状态</option>
                    <#list productState as item>
                        <option value="${item.code}">${item.name}</option>
                    </#list>
                </select>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                        onclick="javascript:deldetail();">
                    <i class="fa fa-minus"></i> 删除
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                        onclick="javascript:editdetail();">
                    <i class="fa fa-edit"></i> 修改
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 10px;float:right"
                        onclick="javascript:newdetail();">
                    <i class="fa fa-plus"></i> 新增
                </button>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm"style="margin-left: 10px;float:right"
                        onclick="javascript:refreshData();">
                    <i class="fa fa-search"></i> 查询
                </button>
            </div>

        </div>
    </div>

    <!-- 弹出窗 -->
    <@modal.editModal id="modal-detail" buttonId="btndetailSave" width="800px" height="100px">
        <@mform.container id="editForm">
            <input id="id" name="id" type="hidden"/>
            <@mform.select2 id='typeCode' name='typeCode' label="类型"  size=12>
                <option value="">请选择分类</option>
                <#list type as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </@mform.select2>
            <@mform.select2 id='brandCode' name='brandCode' label="品牌"  size=12>
                <option value="">请选择品牌</option>
                <#list brand as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </@mform.select2>
            <@mform.select2 id='modelCode' name='modelCode' label="型号"  size=12>
                <option value="">请选择型号</option>
            <#--<#list model as item>
                <option value="${item.code}">${item.name}</option>
            </#list>-->
            </@mform.select2>
            <@mform.select2 id='productState' name='productState' label="状态"  size=12>
                <option value="">请选择状态</option>
                <#list productState as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </@mform.select2>
            <@mform.select2 id='indexState' name='indexState' label="首页是否显示"  size=12>
                <option value="">请选择</option>
                <#list indexState as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </@mform.select2>
            <@mform.input_textarea id='describe' name='describe' size=12 label='概述' placeholder='概述'/>
            <div >
                <div class="showImagBox" style="float: left">
                    <img src="" class="showImag" id="show1">
                </div>
                <div class="showImagBox" style="float: left;margin-left: 20px">
                    <img src="" class="showImag" id="show2">
                </div>
                <div class="showImagBox" style="float: left;margin-left: 20px">
                    <img src="" class="showImag" id="show3">
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img1' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img2' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img3' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
            </div>
           <div>
                <div class="showImagBox" style="float: left">
                    <img src="" class="showImag" id="show4">
                </div>
                <div class="showImagBox" style="float: left;margin-left: 20px">
                    <img src="" class="showImag" id="show5">
                </div>
                <div class="showImagBox" style="float: left;margin-left: 20px">
                    <img src="" class="showImag" id="show6">
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img4' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img5' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
                <div style="display: none">
                    <@mform.input_file id='Img6' name='Img' size=4 label='上传资产图片' placeholder='上传资产图片' icon='fa-edit' />
                </div>
           </div>
        </@mform.container>
    </@modal.editModal>
</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var productState = {
            <#list productState as item>
            "${item.code}": "${item.name}",
            </#list>
        }
        var indexState = {
            <#list indexState as item>
            "${item.code}": "${item.name}",
            </#list>
        }
        var columns = [
            {"sWidth": "40px", "title": "id", "data": "id"},
            {"sWidth": "100px", "title": "类型", "data": "type"},
            {"sWidth": "100px", "title": "品牌", "data": "brand"},
            {"sWidth": "100px", "title": "型号", "data": "modelCode"},
            {"sWidth": "100px", "title": "概述", "data": "describe"},
            {"sWidth": "100px", "title": "首页是否显示", "data": "indexState"},
            {"sWidth": "100px", "title": "发布状态", "data": "productState"}
        ]

        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            pageLength: 10,
//        toolbar: "#btnGroup",
            fixedHeader: false,
            searching: true,
            ordering: true,
            "columnDefs": [{
                "targets": [0],
                "visible": false
            }],
            buttons: [

            ],
            "rowCallback": function (row, data, index) {
                $('td', row).eq(4).html(indexState[data.indexState]);
                $('td', row).eq(5).html(productState[data.productState]);
            }
        });
        $("#show1").on("click", function () {
            $("#Img1").trigger("click")
        })
        $("#Img1").on("change", function () {
            //获取文件  
            var file = $("#Img1")[0].files;
            imgZip(file, $("#show1"), 800, 800);
        })
        $("#show2").on("click", function () {
            $("#Img2").trigger("click")
        })
        $("#Img2").on("change", function () {
            //获取文件  
            var file = $("#Img2")[0].files;
            imgZip(file, $("#show2"), 800, 800);
        })
        $("#show3").on("click", function () {
            $("#Img3").trigger("click")
        })
        $("#Img3").on("change", function () {
            //获取文件  
            var file = $("#Img3")[0].files;
            imgZip(file, $("#show3"), 800, 800);
        })
        $("#show4").on("click", function () {
            $("#Img4").trigger("click")
        })
        $("#Img4").on("change", function () {
            //获取文件  
            var file = $("#Img4")[0].files;
            imgZip(file, $("#show4"), 800, 800);
        })
        $("#show5").on("click", function () {
            $("#Img5").trigger("click")
        })
        $("#Img5").on("change", function () {
            //获取文件  
            var file = $("#Img5")[0].files;
            imgZip(file, $("#show5"), 800, 800);
        })
        $("#show6").on("click", function () {
            $("#Img6").trigger("click")
        })
        $("#Img6").on("change", function () {
            //获取文件  
            var file = $("#Img6")[0].files;
            imgZip(file, $("#show6"), 800, 800);
        })

        $("#brandCode").bind("change", loadModel);

        function loadModel(initValue) {
            $.ajax({
                type: 'POST',
                data: {
                    datas: JSON.stringify({
                        oneCode: $("#typeCode").val(),
                        brandCode: $("#brandCode").val()

                    })
                },
                url: '${request.contextPath}/equipment/use/queryModel',
                success: function (data) {
                    //成功之后
                    $("#modelCode").children().remove();
                    var optionDefault = $("<option value='0'>请选择</option>");
                    $("#modelCode").append(optionDefault);
                    if (data.success) {
                        $(data.datas).each(function (index, item) {
                            var option = $("<option value='" + item.name + "-" + item.code + "'>" + item.name + "-" + item.code + "</option>");
                            $("#modelCode").append(option);
                        })
                        $("#modelCode").val(initValue);
                        $('#select2-modelCode-container').html($("#modelCode").find("option:selected").text());
                    }
                    else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            })
        }

        function newdetail() {
            $('#modal-detail').find(".modal-title").text('新增产品');
            clearForm($('#modal-detail'));
            $("#show1").attr("src", "");
            $("#show2").attr("src", "");
            $("#show3").attr("src", "");
            $("#show4").attr("src", "");
            $("#show5").attr("src", "");
            $("#show6").attr("src", "");
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
            $('#modal-detail').modal();
        }

        function editdetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var $modal = $("#modal-detail");
            $modal.find(".modal-title").text("修改产品信息");
            clearForm($modal);
            var data = datas[0];
            var model = data.modelCode;
            $modal.find("#modelCode").val(model);
            initFormItemData($("#editForm"), data);
            loadModel(data.modelCode);
            $("#show1").attr("src", data.picture1);
            $("#show2").attr("src", data.picture2);
            $("#show3").attr("src", data.picture3);
            $("#show4").attr("src", data.picture4);
            $("#show5").attr("src", data.picture5);
            $("#show6").attr("src", data.picture6);
            $("#btndetailSave").unbind();
            $("#btndetailSave").click(savedetail);
            $modal.modal();
        }

        function refreshData() {
            var data = {
                datas: JSON.stringify({
                    types: $("#types").val(),
                    brands: $("#brands").val(),
                    indexState:$("#indexStates").val(),
                    productState:$("#productStates").val()
                })
            }
            mainTable.queryData("${request.contextPath}/product/manage/queryList", data);
        }

        refreshData();
        function savedetail() {
            swal({
                title: "确定保存",
                text: "是否确定保存此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = $("#editForm form").serializeJSON();
                var scoreImg1 = $("#show1").attr("src");
                if (scoreImg1.startsWith("data:image")) {
                    requestData.picture1 = scoreImg1;
                } else {
                    requestData.picture1 = "";
                }
                var scoreImg2 = $("#show2").attr("src");
                if (scoreImg2.startsWith("data:image")) {
                    requestData.picture2 = scoreImg2;
                } else {
                    requestData.picture2 = "";
                }
                var scoreImg3 = $("#show3").attr("src");
                if (scoreImg3.startsWith("data:image")) {
                    requestData.picture3 = scoreImg3;
                } else {
                    requestData.picture3 = "";
                }
                var scoreImg4 = $("#show4").attr("src");
                if (scoreImg4.startsWith("data:image")) {
                    requestData.picture4 = scoreImg4;
                } else {
                    requestData.picture4 = "";
                }
                var scoreImg5 = $("#show5").attr("src");
                if (scoreImg5.startsWith("data:image")) {
                    requestData.picture5 = scoreImg5;
                } else {
                    requestData.picture5 = "";
                }
                var scoreImg6 = $("#show6").attr("src");
                if (scoreImg6.startsWith("data:image")) {
                    requestData.picture6 = scoreImg6;
                } else {
                    requestData.picture6 = "";
                }
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/product/manage/save',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                $("#modal-detail").modal('hide');
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }

        function deldetail() {
            var datas = mainTable.getSelectedDatas();
            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var data = datas[0];
            swal({
                title: "确定删除",
                text: "是否确定删除此数据",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,确定",
                cancelButtonText: "取消"
            }).then(function (result) {
                if (!result.value)
                    return;
                var requestData = {
                    id: data.id
                };
                var params = {datas: JSON.stringify(requestData)};
                $.ajax({
                    type: 'POST',
                    data: params,
                    url: '${request.contextPath}/product/manage/delete',
                    success: function (data) {
                        //成功之后
                        if (data.success) {
                            swal({
                                title: "成功",
                                text: "操作成功!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "确定"
                            }).then(function (result) {
                                refreshData();
                            });
                        } else {
                            swal("错误", data.errorMsg, "error");
                        }
                    },
                    error: function (xhr, type) {
                        swal("错误", "系统发生内部错误!请稍后再试!", "error");
                    }
                });
            });
        }
    </script>
</@layout.foot>
</body>
</html>